<template>
  <div>
    <div @click="toBlog"><Title title="播客"></Title></div>
    <div class="blogcontent">
      <div
        class="blogsong"
        v-for="item in BlogList"
        :key="item.id"
        :data-id="item.id"
        @click="blogSong"
      >
        <img class="blogimg" v-lazy="item.picUrl" />
        <div class="blogname">{{ item.copywriter }}</div>
        <div class="blogword">[独家]{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '../Title/title.vue'
export default {
  name: 'Blog',
  data() {
    return {
      BlogList: [],
    }
  },
  components: {
    Title,
  },
  methods: {
    async resong() {
      const res = await this.$API.RecommentSong.reqsong(6)
      this.BlogList = res.result
      // console.log(this.BlogList);
    },
    // 点击标题实现跳转
    toBlog() {
      this.$router.history.push({ path: '/findmusic/songlist' })
    },
    // 点击跳转
    blogSong(event) {
      // 拿到歌曲id
      const { id } = event.currentTarget.dataset
      //console.log(id)
      // 跳转页面，并将数据传过去
      this.$router.history.push({
        name: 'Songsheet',
        query: {
          id,
        },
      })
    },
  },
  async mounted() {
    // let phone = '17820707676'
    // let password = 'a12345678'
    // let res = await this.$API.RecommentSong.getLogin(phone, password)
    // console.log(res)
    this.resong()
  },
}
</script>

<style scoped>
.blogcontent {
  width: 100%;
  margin-left: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.blogsong {
  flex-grow: 0;
  width: 15%;
  min-width: 15%;
}
.blogimg {
  width: 100%;
  height: 160px;
  border-radius: 5px;
}
.blogname {
  position: absolute;
  margin-top: -26px;
  margin-left: 10px;
}
.blogword {
  margin-top: 16px;
}
</style>